<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
    <title>Hand In Hand</title>
    <%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>
<script type="text/javascript">
$( document ).ready(function() {
	$("#requestUpdateForm").submit( function(event) {
		$('#selectedTags').val($("input[name='hiddenTagList']").val());
	});
	
	$(function () {
	    $(".tagsManager").tagsManager({
	         prefilled: $('#selectedTags').val(),
	         CapitalizeFirstLetter: true,
	         preventSubmitOnEnter: true,
	         typeahead: true,
	         typeaheadAjaxSource: null,
	         typeaheadSource: null,
	         delimeters: [44, 188, 13],
	         backspace: [8],
	         blinkBGColor_1: '#FFFF9C',
	         blinkBGColor_2: '#CDE69C',
	         hiddenTagListId: 'hiddenTagList',
	         hiddenTagListName: 'hiddenTagList',
	         replace: true,
	         tagsContainer: $('.tagList'),
	         maxTags: 15
	     });
	});
	
	$('#datePicker').datepicker({
		format : "dd/mm/yyyy"
	});
	$('#datePicker2').datepicker({
		format : "dd/mm/yyyy"
	});
	$('.clockPicker').clockpicker();
	$('.clockPicker2').clockpicker();
	
	$('#services').hide();
	$("#goods").hide();
});
function activityTypeChanged() {
	if($("input:radio:checked").val() == "GOODS"){
		$('#goods').show();
		$("#services").hide();
	}
	else if($("input:radio:checked").val() == "SERVICES"){
		$('#services').show();
		$("#goods").hide();
	}
	else if($("input:radio:checked").val() == "NONE"){
		$('#services').hide();
		$("#goods").hide();
	}
}
</script>
<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header">Edit Request</h3>
			<form:form id="requestUpdateForm" modelAttribute="requestUpdateForm"  method="post" action="./updateRequest">
				<div class="row">
					<div class="col-xs-5 col-xs-offset-1">
						<div class="row">
							<div class="col-xs-12">
								<label>Name : </label>
								<form:input path="request.name" type="text" class="form-control" cssErrorClass="form-control inputError"/>
								<form:errors path="request.name" cssClass="errorMessage" />
							</div>
						</div>
		   				<div class="row">
		   					<div class="col-xs-7">
								<label>Ending Date : </label>
				 				<form:input path="endingDay" type="text" class="form-control" cssErrorClass="form-control inputError" id="datePicker2" />
								<form:errors path="endingDay" cssClass="errorMessage" />
							</div>
							<div class="col-xs-5">
								<label>Ending Time : </label>
								<div class="input-group clockpicker" id="clockPicker2" data-placement="top" data-autoclose="true">
				   					<form:input path="endingHour" id="endingHour" type="text" class="form-control" cssErrorClass="form-control inputError"/>
				   					<form:errors path="endingHour" cssClass="errorMessage" />
				   				</div>
			   				</div>
		   				</div>
		   				<div id="tags" class="box">
			   				<div class="row">
			   					<div class="col-xs-12">
					   				<label>Add an item or service to your request:</label>
									<form:radiobuttons path="request.activityType" id="activityType" class="radio" onchange="activityTypeChanged();"/>
								</div>
							</div>
							<div class="row">
			   					<div class="col-xs-12">
									<div id="goods">
										<label>Requested item name:</label>
										<form:input path="request.goods.itemName"/>
										<label>Requested amount and unit: </label>
					<!-- 					validation da integer check yap -->
										<form:input path="request.goods.targetAmount"/><form:input path="request.goods.unit"/>
									</div>
									<div id="services">
										<label>Requested skill:</label>
										<form:input path="request.service.requiredSkill.name"/> 
										<label>Requested required number: </label>
					<!-- 					validation da integer check yap -->
										<form:input path="request.service.requiredNumber"/>
									</div>
								</div>
							</div>
						</div>
		   			</div>
		   			<div class="col-xs-5">
		   				<div class="row">
							<div class="col-xs-12">
								<label>Info : </label>
								<form:textarea path="request.description" type="text" class="form-control" cssErrorClass="form-control inputError"/>
								<form:errors path="request.description" cssClass="errorMessage" />
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div id="tags" class="box">
									<label>Tags</label>
								 	<input type="text" name="tags" placeholder="Tags" class="tagsManager tm-input-success tm-input-small" />
									<div class="tagList"></div> 
									<form:input hidden="true" id="selectedTags" path="selectedTags" />
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<br>
								<button class="btn btn-primary" type="submit">Update Request</button>
							</div>
						</div>
		   			</div>
				</div>
			</form:form>
			</div>
			<hr>
		</div>	
	</div>

	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>

</body>
</html>